@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');



::-webkit-scrollbar {
  width: 10px;
  scroll-behavior: smooth;
}


::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 

::-webkit-scrollbar-thumb {
  background: #888; 
}


::-webkit-scrollbar-thumb:hover {
  background: #555; 
}



body {
    margin: 0%;
    padding: 0%;
    scroll-behavior: smooth;
    
  }


  h3.warn-h3 {
    background-color: #ffd32a;
    color: white;
    font-size: 15px;
    margin: 0%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  img.warn-img {
    width: 2vh;
    margin-right: 20px;
  
   
    
  }
  

  
  #container-nav {
    background-color: #ececec;
    width: 100%;
    
  }

  
  
  #container-nav > ul {
    list-style-type: none;
    color: #ff812c;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  
  #container-nav > ul > li {
    float: right;
    padding: 2%;
    font-family: 'Poppins', sans-serif;
    color: #ff812c;
    transition: .3s;
  }
  
  #ul-nav > li a {
    text-decoration: none;
    display: block;
    color: #ff812c;
    transition: .3s;
  }
  
  img#logo {
    width: 10vw;
    height: 9vh;
    float: left;
    padding-left: 20px;
    margin-left: 20px;
  }
  
  #container-nav > ul > li:hover {
    background-color: #ff812c;
    
    
    
  }
  
  #container-nav > ul > li:hover a{
    color: white;
  }



  @media screen and (max-width:600px) {


    #container-nav {
      text-align: center ;
    }
    
    
    #ul-nav > li{
      float: none;
      display: flex;
      flex-direction: column-reverse;
      border-bottom: 1px solid #ff812c;
      
    }

    

    #ul-nav {
      display: flex;
      flex-direction: column;
    }
    
    #ul-nav li:first-child{
      order: 4;
    }
    
    #ul-nav li:nth-child(2){
      order: 3;
    }
    
    #ul-nav li:nth-child(3){
      order: 2;
    }
    
    #ul-nav li:nth-child(4){
      order: 1;
    }
  
}


@media screen and (max-width:1700px) {
  img#logo {
    width: 10vw;
    height:8vh;
  }
}

@media screen and (max-width:1490px) {
  img#logo {
    width: 10vw;
    height:7vh;
  }
}

@media screen and (max-width:1250px) {
  img#logo {
    width: 10vw;
    height:6vh;
  }

}

@media screen and (max-width:950px){

  img#logo {
    width: 12vw;
    height:5vh;
  }
}

@media screen and (max-width:750px) {
  img#logo {
    width: 13vw;
    height:5vh;
  }
}

@media screen and (max-width:600px) {

  img#logo  {
    width: 20vw;
    height: 8vh;
    float: none;
    padding-left: 0;
    margin-left: 0;
  }

}

@media screen and (max-width:450px) {

  img#logo  {
    width: 30vw;
    height: 8vh;
    float: none;
  }

}